---
type: tutorial
unitTitle: 搭建并部署你的第一个 Astro 网站
title: '第一单元：前期准备'
description: >-
  教程：搭建你的 Astro 博客 —

  准备好开发环境，然后创建并部署你的第一个 Astro 网站
head:
  - tag: title
    content: 搭建博客教程：第一单元 - 设置 | Docs
---
import Checklist from '~/components/Checklist.astro';
import Box from '~/components/tutorial/Box.astro';
import { Steps } from '@astrojs/starlight/components';

现在你已经知道你要搭建什么了，是时候来设置你所需的所有工具！

本单元将向你展示如何设置开发环境并部署网站到 Netlify。如果你已经熟悉自己的环境和工作流程，可以直接跳到[第二单元](/zh-cn/tutorial/2-pages/)。

:::tip[在在线代码编辑器中学习教程]

想要在在线代码编辑器中完成这个教程吗？请按照以下说明开始使用 Google IDX。

<details>
<summary>使用 Google IDX：按照以下说明操作，然后直接进入第二单元！</summary>

**设置 IDX**

<Steps>
1. 点击外部链接以 [在 IDX 的新工作区创建一个 "Empty Project（空项目）" 模板](https://astro.new/minimal?on=idx)。

2. 如果你尚未登录，请按照提示登录你的 Google 帐户。

3. 如果要将项目从默认的 “Empty Project” 更改为项目，请输入项目的名称，并单击 **Create（创建）**。

4. 等待工作区创建完成。这个过程可能会花上 30 至 60 秒。如果一切顺利的话，你会看到 Astro 项目被加载到在线代码编辑器中。

5. 等待 IDX 运行两个脚本：其中一个用于安装 Astro，另一个用于运行开发服务器。请注意，如果你的工作区在 Astro 完成安装之前加载，你可能会短暂地看到一条消息，指出你的工作区 "couldn't find Astro"。如果这条消息没有自行清除，你可以忽略并取消它。
</Steps>

**进行修改**

如果一切顺利的话，在文件窗口中，你应该可以看到 `src/pages/index.astro`，并可以在分屏窗口中浏览到网页的实时预览。按照 ["编写你的第一行 Astro 代码"](/zh-cn/tutorial/1-setup/3/) 来修改此文件。

**创建 GitHub 仓库**

<Steps>
1. 导航到垂直菜单栏中的 “Source Control” 导航项，或使用 <kbd>CTRL + SHIFT + G</kbd> 打开。

2. 选择 Publish to GitHub（发布到 GitHub）选项。这将在你的 GitHub 帐户中创建一个新的仓库。

3. 按照提示登录你的 GitHub 账户。

4. 登录后，返回到 IDX 选项卡，你可以选择对新仓库重新命名，以及是要创建私有仓库或是公共仓库。你可以为本教程选择任何名称和任意类型的仓库。

5. IDX 将会进行初始化提交并发布到你的 Github 仓库中。

6. 今后，只要你有更改要提交回 GitHub，源代码控制导航图标就会显示一个数字。这是自上次提交以来已更改的文件数。导航到此选项卡并执行两个步骤（提交和发布），这将允许你输入提交消息并更新存储库。
</Steps>

**部署你的网站**

如果你想部署到 Netlify，并在工作时拥有网站的实时发布版本，可跳至 [将你的网站部署到网络](/zh-cn/tutorial/1-setup/5/)。

否则，请跳至 [第二单元](/zh-cn/tutorial/2-pages/) 开始使用 Astro 进行搭建！

</details>

{/* StackBlitz 说明
<details>
<summary>使用 StackBlitz：按照以下说明操作，然后直接进入第二单元！</summary>

**设置 StackBlitz**

<Steps>
1. 点击外部链接以 [在 StackBlitz 创建一个 "Empty Project（空项目）" 模板](https://astro.new/minimal?on=stackblitz)。

2. 在右上方点击 `Sign in` 以使用你的 GitHub 账号登录。

3. 在 StackBlitz 编辑器窗口的左上方，点击 `fork` 模板（保存到你自己的账号中）。

4. 等待项目加载完毕，你将看到 `Empty Project` 的实时预览。
</Steps>

**进行修改**

在文件窗口中，你应该可以看到 `src/pages/index.astro`。点击打开它，按照[编写你的第一行 Astro 代码](/zh-cn/tutorial/1-setup/3/)来修改此文件。

**创建 GitHub 仓库**

<Steps>
1. 点击文件列表顶部的 <kbd>Connect Repository</kbd> 按钮，输入一个新的仓库名称，然后点击 <kbd>Create repo & push</kbd>。

2. 当你有修改要提交到 GitHub 时，工作区左上方将出现一个 `Commit` 按钮。点击此按钮并输入提交信息 `commit message`，然后它将被提交到你的仓库。
</Steps>

**部署你的网站**

如果你想部署到 Netlify，并在工作时拥有网站的实时发布版本，可跳至 [将你的网站部署到网络](/zh-cn/tutorial/1-setup/5/)。

否则，请跳至[第二单元](/zh-cn/tutorial/2-pages/)开始使用 Astro 进行搭建！

</details>
*/}
:::

## 本单元目标

在本单元中，你将会**创建一个新项目**，该项目将**存储在 Github** 并且**连接到 Netlify**。

在编写代码的过程中，你将定期将更改提交到 GitHub。Netlify 将使用 GitHub 存储库中的文件来构建你的网站，然后将其发布到一个唯一的地址上，任何人都可以在互联网上查看它。

每当你提交更改到 GitHub 时，它会向 Netlify 发送通知。然后，Netlify 将自动重新构建和重新发布你的网站以应用这些更改。

<Box icon="check-list">

## 任务清单

<Checklist>
- [ ] 我已经准备好了一个用于 Astro 项目的开发环境！
</Checklist>
</Box>
